import { trendAlarm } from "@/api/modules/iot/alarm";
import { getDeviceList } from "@/api/modules/iot/device";
import { dayjs } from "element-plus";

export default defineComponent({
	setup(props, { expose }) {
		const state = reactive({
			category: [
				{ icon: "dev-1", label: "在线设备", value: 0 },
				{ icon: "dev-2", label: "离线设备", value: 0 },
				{ icon: "dev-3", label: "当前告警", value: 0 }
			]
		});
		const loadData = async () => {
			let alarm: any = await trendAlarm({
				timeStamp: `${dayjs().format("YYYY-MM-DD 00:00:00")}~${dayjs().format("YYYY-MM-DD 23:59:59")}`
			});
			let tadayAlarm = alarm.result?.[dayjs().format("YYYY-MM-DD")];
			state.category[2].value = tadayAlarm?.total || 0;

			let res = await getDeviceList({ pageIndex: 1, pageSize: 99999 });
			let result = res.result;
			let deviceTotal = { total: 0, online: 0, offline: 0 };
			result.records.forEach((item: any) => {
				if (item.onlineStatus == "online") {
					deviceTotal.online += 1;
				} else {
					deviceTotal.offline += 1;
				}
			});
			state.category[0].value = deviceTotal.online;
			state.category[1].value = deviceTotal.offline;
		};
		expose({ loadData });
		return () => {
			return (
				<div class="device-total">
					{state.category.map((item: any) => {
						return (
							<div class="item">
								<div class={[item.icon, "item-icon"]}></div>
								<div class="item-info">
									<div class="label">{item.label}</div>
									<div class="value">{item.value}</div>
								</div>
							</div>
						);
					})}
				</div>
			);
		};
	}
});
